@import '../../style/themes/index';
@import './mixin.less';

@quick-search-prefix-cls: ~'@{kd-prefix}-quick-search';
@search-panel-prefix-cls: ~'@{kd-prefix}-search-panel';
@search-prefix-cls: ~'@{kd-prefix}-search';

.@{search-prefix-cls} {
  border-bottom: @search-sizing-border-width solid @quick-search-border-bottom-color;
  &-size-small {
    width: @search-small-width;
  }
  &-size-middle {
    width: @search-middle-width;
  }
  &-size-large {
    width: @search-large-width;
  }

  &-disabled {
    cursor: not-allowed;
  }

  &-borderless {
    border: none !important;
  }

  &-border {
    border: @search-sizing-border-width solid @quick-search-border-bottom-color;
    border-radius: @search-border-radius;
  }

  &-prefix,
  &-suffix {
    font-size: @search-icon-font-size;
    color: @search-icon-color;
  }

  &-focused,
  &:not(.@{search-prefix-cls}-disabled):hover {
    border-color: @search-color-theme;
    .@{search-prefix-cls}-prefix {
      color: @search-color-theme;
    }

    .@{search-prefix-cls}-suffix {
      color: @search-color-theme;
    }
  }
}

.@{quick-search-prefix-cls} {
  display: inline-block;
  max-width: @quick-search-max-width;
  width: @quick-search-default-width;
  height: @quick-search-default-height;
  position: relative;
  border-bottom: @search-sizing-border-width solid @quick-search-border-bottom-color;
  transition: all calc(@search-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
  &-borderless {
    border: none !important;
  }
  &-border {
    border: @search-sizing-border-width solid @quick-search-border-bottom-color;
    border-radius: @search-border-radius;
  }
  &:hover:not(&-disabled) {
    border-color: @search-color-theme;
    .@{quick-search-prefix-cls}-prefix {
      color: @search-color-theme;
    }
  }
  &-focused:not(&-disabled) {
    max-width: @quick-search-max-width;
    width: 100% !important;
    border-color: @search-color-theme;
    .@{quick-search-prefix-cls}-prefix {
      color: @search-color-theme;
    }
  }
  &-disabled {
    cursor: not-allowed;
  }
  &-prefix {
    margin-right: 4px;
    align-self: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    font-size: @search-icon-font-size;
    color: @search-icon-color;
  }
  &-selector {
    cursor: text;
    padding-left: 24px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    &-disabled {
      cursor: not-allowed;
    }
  }
  &-selection-overflow {
    position: relative;
    display: flex;
    flex: auto;
    flex-wrap: wrap;
    max-width: 100%;
    &-item {
      display: flex;
      position: relative;
      border-radius: 2px;
      border: 1px solid @search-end-color;
      margin: 2px 12px 2px 0;
      cursor: pointer;
      max-width: 100%;
      height: 20px;
      &:hover {
        .@{quick-search-prefix-cls}-selection-overflow-item-del {
          display: block;
        }
      }
      &-tag {
        padding: 0 4px 0 4px;
        flex-shrink: 0;
        max-width: 170px;
        background: @search-end-color;
        line-height: 20px;
        font-size: @quick-search-dropdown-font-size;
        color: @white;
        .ellipsis();
      }
      &-label {
        font-size: @quick-search-dropdown-font-size;
        color: #212121;
        letter-spacing: 0;
        padding: 0 4px;
        align-self: center;
        .ellipsis();
        max-width: @search-tag-max-width;
      }
      &-del {
        height: 14px;
        width: 14px;
        line-height: 1;
        font-size: @search-middle-font-size;
        border-radius: 50%;
        position: absolute;
        right: -7px;
        top: -6px;
        display: none;
        background: @search-color-background;
        &:hover {
          color: @quick-search-selected-tags-del-hover-bg;
        }
      }
    }
  }

  &-selection {
    &-placeholder {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      color: @quick-search-selection-placeholder-color;
      font-size: @search-placeholder-font-size;
      .ellipsis();
    }

    &-search {
      position: relative;
      max-width: 100%;
      margin-top: 2px;
      margin-bottom: 2px;

      &-mirror {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        white-space: pre;
        visibility: hidden;
      }
    }
  }

  &-input {
    outline: 0;
    border-radius: 0;
    border: none;
    width: 100%;
    background: transparent;
    font-size: @search-input-font-size;
    color: @search-color-text-primary;
    &::placeholder {
      font-size: 12px;
      color: @quick-search-input-color;
      letter-spacing: 0;
    }
  }

  &-dropdown {
    padding: 8px 0;
    margin: 0;
    z-index: @zIndex-popper;
    font-size: @quick-search-dropdown-font-size;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: @search-dropdown-border-radius;
    background: @search-color-background;
    overflow: auto;
    &-scroll {
      overflow-y: auto;
    }
    &-empty {
      padding: 5px 12px;
    }
    &-desc {
      .dropdown-option();
      .ellipsis();
      color: @quick-search-dropdown-desc-color;
      font-size: @search-dropdown-desc-font-size;
    }
  }

  &-option {
    .dropdown-option();
    .ellipsis();
    cursor: pointer;
    color: @search-color-text-primary;

    &-tag {
      margin-right: 12px;
    }

    &:hover:not(&-selected) {
      background: @search-disabled-contain-bg;
    }
    &-selected:not(&-disabled) {
      background: @quick-search-dropdown-selected-bg;
      .@{quick-search-prefix-cls}-option-tag {
        color: @search-hover-color;
      }
      .@{quick-search-prefix-cls}-option-content {
        color: @search-hover-color;
      }
    }
  }

  &-npl {
    border-top: 1px solid @quick-search-npl-border-color;
    &-loading {
      height: @quick-search-dropdown-option-height;
      line-height: @quick-search-dropdown-option-height;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding-left: @quick-search-dropdown-option-padding-horizontal;
      &-item {
        width: 4px;
        height: 4px;
        margin-right: 5px;
        border-radius: 50% 50% 50% 50%;
        animation: animate_loading 1s infinite;
      }

      &-item:nth-child(1) {
        background-color: @search-dot-color-first;
      }
      &-item:nth-child(2) {
        background-color: @spin-dot-color-second;
      }
      &-item:nth-child(3) {
        background-color: @spin-dot-color-third;
      }
      &-item:nth-child(4) {
        background-color: @spin-dot-color-fourth;
      }
    }
  }
}

.@{search-panel-prefix-cls} {
  width: @search-panel-width;
  border-radius: 4px;
  background: @search-color-background;

  &-wrapper {
    display: flex;
    align-items: center;
    height: @search-panel-height;
    border-radius: 4px;
  }

  &-recommend {
    display: flex;
    align-items: center;
    padding-left: 24px;

    &-icon {
      font-size: 18px;
      margin: 0 8px;
      transition: all calc(@search-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
    }
  }

  &-type {
    width: 230px;
    max-height: 400px;
    overflow: auto;
    &-list {
      line-height: 30px;
      display: block;
      padding-left: 24px;
      &:hover {
        background: @search-panel-hover-bg;
        color: @search-panel-hover-color;
      }
      &-active {
        color: @search-panel-hover-color;
      }
    }
  }

  &-dropDown {
    height: 400px;
    display: flex;
    border-top: 1px solid @search-panel-border-color;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    transition: all calc(@search-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);

    &-result {
      width: 300px;
      height: 400px;
      border-right: 1px solid @search-panel-border-color;
      &-wrapper {
        max-height: 330px;
        overflow: auto;
        border-bottom: 1px solid @search-panel-border-color;
      }

      &-list {
        display: flex;
        align-items: flex-start;
        height: 48px;
        padding: 5px 13px 2px 17px;
        font-size: 12px;
        line-height: 20px;
        cursor: pointer;
        box-sizing: border-box;

        &:hover {
          background: @search-panel-hover-bg;
        }

        &-active {
          background: @search-panel-hover-bg;
        }

        &-title {
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-line-clamp: 1;
        }

        &-type {
          color: @search-color-text-third;
        }

        &-sub-title {
          color: @search-color-text-third;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 95px;
        }

        img {
          height: 18px;
          width: 18px;
          margin-right: 4px;
          margin-top: 2px;
        }
      }
    }

    &-summary {
      flex: 1;
      align-items: center;
      padding-top: 50px;
      display: flex;
      flex-direction: column;

      &-pic {
        user-select: none;
        position: relative;
        margin-bottom: 20px;
      }
      &-icon {
        position: absolute;
        width: 48px;
        height: 48px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      &-title {
        margin-bottom: 10px;
        font-size: @search-middle-font-size;
        color: @search-color-text-primary;
      }

      &-list {
        margin-top: 4px;
        color: @search-color-text-secondary;
        font-size: @search-small-font-size;
        line-height: 20px;
      }
    }

    &-search {
      height: 48px;
      display: flex;
      align-items: center;
      padding-left: 17px;
      font-size: @search-middle-font-size;
      cursor: pointer;

      &:hover {
        background: @search-panel-hover-bg;
      }

      &-active {
        background: @search-panel-hover-bg;
      }

      &-value {
        .ellipsis();
      }
    }

    &-loading {
      margin-left: 30px;
      margin-top: 10px;
      display: flex;
    }
  }

  .@{kd-prefix}-input-clear-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: @search-end-color;
    position: relative;

    .@{kd-prefix}icon {
      position: absolute;
      right: 2.5px;
      top: -2px;
      color: @white;
    }
  }
}

.@{search-panel-prefix-cls}-tooltip::before {
  display: none;
}

.@{search-panel-prefix-cls}-tooltip-content {
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;

  &:hover {
    background: @search-panel-hover-bg;
  }
}

.@{quick-search-prefix-cls}-dropdown-wrapper {
  &.topLeft,
  &.bottomLeft {
    &.hidden {
      opacity: 0;
      visibility: hidden;
      transition: all calc(@search-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
    }
  }

  &.bottomLeft-active {
    padding: 10px 0;
  }
}
